<template>
  <view class="layout">
    <wd-navbar
      title="人脸认证"
      placeholder
      left-arrow
      :style="{ marginTop: `${systemBarHeight}px` }"
      @click-left="handleClickLeft"
    />
    <view class="preview-image" @click="capture">
      <image :src="filePath" mode="aspectFill" class="image" />
    </view>
    <view class="tip"> 人脸识别认证 </view>
  </view>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useToast } from "wot-design-uni";
import { updatePersonnelFace } from "@/api/face";
import StudentApi from "@/api/student";
import { uploadFile } from "@/hooks/useUpload";
import { useConfigStore } from "@/store/config";
import { useStudentStore } from "@/store/student";

const toast = useToast();

definePage({
  style: {
    navigationBarTitleText: "人脸绑定",
    navigationStyle: "custom",
  },
});
const configStore = useConfigStore();
const { systemBarHeight } = storeToRefs(configStore);

const studentStore = useStudentStore();
const { curStudentInfo, studentInfos } = storeToRefs(studentStore);
console.log("人脸信息：", curStudentInfo.value);
const filePath = ref(curStudentInfo.value.url || "");
function capture() {
  uni.chooseImage({
    count: 1, // 最多选择一张图片
    sizeType: ["original", "compressed"], // 原图或压缩图
    sourceType: ["camera"], // 使用相机
    success(res) {
      console.log("拍照成功，图片路径：", res);
      filePath.value = res.tempFilePaths[0];

      uploadFile({
        tempFilePath: res.tempFilePaths[0],
        formData: {
          type: "face",
        },
        onSuccess: async (res) => {
          console.log("上传成功", res);
          console.log("上传成功");
          toast.success("上传成功");
          const { data } = JSON.parse(res);
          console.log("上传成功:", data);
          await updatePersonnelFace({
            personnel: {
              personnelId: curStudentInfo.value.personnelId,
              url: data.downloadUrl,
            },
          });
          const personRes = await StudentApi.getPersonnels();
          console.log("personRes", personRes);
          if (personRes) {
            studentInfos.value = personRes;
            curStudentInfo.value =
              personRes.find(
                (item) => item.personnelId === curStudentInfo.value.personnelId,
              ) || {};
          }
          console.log("curStudentInfo", curStudentInfo.value);
          console.log("studentInfos", studentInfos.value);
          filePath.value = data.downloadUrl;
          handleClickLeft();
        },
        onError: (err) => {
          console.error("上传失败：", err);
          toast.success("上传失败");
        },
        onComplete: () => {},
      });
    },
    fail(err) {
      console.error("拍照失败：", err);
    },
  });
}

function handleClickLeft() {
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.preview-image {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 250px;

  .image {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #f2f2f2;
  }
}
.tip {
  margin-top: 30px;
  font-size: 14px;
  font-weight: normal;
  line-height: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  letter-spacing: 0.005em;
  color: #999999;
  justify-content: center;
}
</style>
